<template>
  <div class="data-table-container">
    <div class="table-header">
      <h3>{{ title }}</h3>
    </div>
    <div class="table-content">
      <el-table
        :data="tableData"
        :height="height"
        stripe
        size="mini"
        style="width: 100%"
        :header-cell-style="{ background: 'rgba(255, 255, 255, 0.1)', color: '#fff' }"
        :cell-style="{ background: 'transparent', color: '#fff' }"
      >
        <el-table-column
          v-for="column in columns"
          :key="column.prop"
          :prop="column.prop"
          :label="column.label"
          :width="column.width"
          :align="column.align || 'center'"
        >
          <template slot-scope="scope">
            <span v-if="column.type === 'status'" :class="getStatusClass(scope.row[column.prop])">
              {{ scope.row[column.prop] }}
            </span>
            <span v-else-if="column.type === 'progress'">
              <el-progress 
                :percentage="scope.row[column.prop]" 
                :color="getProgressColor(scope.row[column.prop])"
                :show-text="false"
                :stroke-width="8"
              />
              <span style="margin-left: 10px">{{ scope.row[column.prop] }}%</span>
            </span>
            <span v-else-if="column.type === 'time'">
              {{ formatTime(scope.row[column.prop]) }}
            </span>
            <span v-else>
              {{ scope.row[column.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DataTable',
  props: {
    title: {
      type: String,
      default: '数据表格'
    },
    columns: {
      type: Array,
      default: () => []
    },
    tableData: {
      type: Array,
      default: () => []
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  methods: {
    refresh() {
      this.$emit('refresh')
    },
    exportData() {
      this.$emit('export')
    },
    getStatusClass(status) {
      const statusMap = {
        '正常': 'status-success',
        '警告': 'status-warning',
        '错误': 'status-error',
        '离线': 'status-offline'
      }
      return statusMap[status] || 'status-default'
    },
    getProgressColor(percentage) {
      if (percentage < 50) return '#67C23A'
      if (percentage < 80) return '#E6A23C'
      return '#F56C6C'
    },
    formatTime(time) {
      if (!time) return '-'
      const date = new Date(time)
      return date.toLocaleString('zh-CN')
    }
  }
}
</script>

<style lang="scss" scoped>
.data-table-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: hidden;

  .table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    h3 {
      margin: 0;
      font-size: 16px;
      font-weight: bold;
      color: #fff;
    }
  }

  .table-content {
    padding: 0;
  }
}

.status-success {
  color: #67C23A;
  font-weight: bold;
}

.status-warning {
  color: #E6A23C;
  font-weight: bold;
}

.status-error {
  color: #F56C6C;
  font-weight: bold;
}

.status-offline {
  color: #909399;
  font-weight: bold;
}

.status-default {
  color: #fff;
}

::v-deep .el-table {
  background: transparent;
  color: #fff;
  font-size: 13px;
  &::before { display: none; }
  .el-table__header-wrapper .el-table__header {
    background: rgba(0,0,0,0.15);
    color: #fff;
  }
  .el-table__body-wrapper .el-table__body {
    background: transparent;
    color: #e6e6e6;
  }
  .el-table__row {
    background: transparent;
    color: #e6e6e6;
    &:hover { background: rgba(255, 255, 255, 0.1) !important; }
  }
  .el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #e6e6e6;
  }
}

::v-deep .el-button--text {
  color: #fff;
  
  &:hover {
    color: #67C23A;
  }
}

::v-deep .el-progress-bar__outer {
  background: rgba(255, 255, 255, 0.2);
}
</style> 